<template>

<!--登录页面-->
<div class="login-container" v-if="userStore.login == false">

	<!--登录表单-->
	<el-form :model="LoginInput" class="login-box">
		<h1 class="login-title">欢迎登录</h1>
		<h3 class="login-title">教学过程管理系统</h3>
		<el-form-item label="账号" prop="name">
			<el-input v-model="LoginInput.InputUserName" type="text" placeholder="请输入用户名"></el-input>
		</el-form-item>
		<el-form-item label="密码" prop="password">
			<el-input v-model="LoginInput.InputUserPassword" type="password" placeholder="请输入密码"></el-input>
		</el-form-item>
		<el-form-item>
			<el-button type="primary" @click="LoginClick" style="width: 100%;">登录</el-button>
		</el-form-item>
	</el-form>
</div>

<!--主页面-->
<div class="layout-container" v-if="userStore.login == true">

	<!--左侧栏 -->
	<el-aside class="sidebar" width="250px">

		<!--顶部标题-->
		<div class="sidebar-header">
			<el-icon class="logo-icon"><School/></el-icon>
			<span class="system-title">教学过程管理系统</span>
		</div>

		<!--菜单-->
		<el-menu :default-active="$route.path" router class="menu-list" unique-opened>
			
			<!--学生管理-->
			<el-menu-item index="1">
				<el-icon><User/></el-icon>
				<span>学生管理</span>
			</el-menu-item>

			<!--班级管理-->
			<el-menu-item index="2">
				<el-icon><OfficeBuilding/></el-icon>
				<span>班级管理</span>
			</el-menu-item>

			<!--教室管理-->
			<el-sub-menu index="3">
				<template #title>
					<el-icon><Guide/></el-icon>
					<span>教室管理</span>
				</template>
				<el-menu-item index="/classroom/simple-apply">教室申请</el-menu-item>
				<el-menu-item index="/classroom/apply">教室申请管理</el-menu-item>
				<el-menu-item index="/classroom/resource">教室资源与规则管理</el-menu-item>
				<el-menu-item index="/classroom/usage">教室使用记录</el-menu-item>
			</el-sub-menu>

			<!--考务管理-->
			<el-sub-menu index="4">
				<template #title>
					<el-icon><Reading/></el-icon>
					<span>考务管理</span>
				</template>
				<el-menu-item index="/exam">考试安排</el-menu-item>
				<el-menu-item index="/proctor-task">监考安排</el-menu-item>
				<el-menu-item index="/GradeManagement">成绩管理</el-menu-item>
			</el-sub-menu>

			<!--教材管理-->
			<el-menu-item index="5">
				<el-icon><User /></el-icon>
				<span>教材管理</span>
			</el-menu-item>
		</el-menu>
	</el-aside>

	<!-- 右侧主内容区 -->
	<el-container class="main-container">

		<!-- 顶部栏 -->
		<el-header class="main-header">

			<!--左侧页面标题-->
			<div class="header-left">
				<span class="header-title">{{ pageStore.pagename }}</span>
			</div>

			<!--右侧退出登录-->
			<div class="header-right">
				
				<!--退出登录-->
				<el-dropdown @command="OutCommand">
					<span class="user-info">
						{{ nowState }}, {{ userStore.username }}
						<el-icon><ArrowDown/></el-icon>
					</span>
					<template #dropdown>
						<el-dropdown-menu>
							<el-dropdown-item>
								退出登录
							</el-dropdown-item>
						</el-dropdown-menu>
					</template>
				</el-dropdown>
			</div>
		</el-header>

		<!-- 内容区 -->
		<el-main class="main-content">
			<RouterView/>
		</el-main>
	</el-container>
</div>

</template>

<script lang='ts' setup>

import { ref, onMounted, watch } from 'vue'
import { RouterView } from 'vue-router'
import { Search } from '@element-plus/icons-vue'
import axios from 'axios'
import { ElNotification, ElIcon, ElMessage } from 'element-plus';
import { useUserStore } from '@/stores/userStore';
import { usePageStore } from '@/stores/pageStore';

// Pinia实例化
let userStore = useUserStore()
let pageStore = usePageStore()

// 退出登录回调
function OutCommand(){
	userStore.login = false
	userStore.username = ""
	userStore.password = ""
	userStore.userid = ""
	ElMessage("退出登录")
}

// 输入的数据
let LoginInput = ref({
	InputUserName: "",
	InputUserPassword: "",
})

// 登录回调
function LoginClick(){
	ElMessage("登录成功")
	userStore.login = true
}

// Fcuntion ----------------------------------------

// 获取当前时间
const CurrentTime = (curTime: any) => {
	const time = new Date(curTime)
	const hour = time.getHours()
	const minute = time.getMinutes()
	const second = time.getSeconds()
	return {hour, minute, second}
}

// 获取当前状态
const CurrentState = (hour: any) => {
	if(hour >= 6 && hour < 12){
		return "早上好"
	}
	else if(hour >= 12 && hour < 14){
		return "中午好"
	}
	else if(hour >= 14 && hour < 18){
		return "下午好"
	}
	else{
		return "晚上好"
	}
}

// 当前时间
let nowTime = ref({hour: 0, minute: 0, second: 0})

// 早上好/中午好/下午好/晚上好
let nowState = ref("")

// 调用启动钩子获取初始数据
nowTime.value = CurrentTime(new Date())

// 调用挂载钩子持续获取更新数据
onMounted(() => {
	setInterval(() => {
		nowTime.value = CurrentTime(new Date())
		nowState.value = CurrentState(nowTime.value.hour)
	})
});

</script>

<style scoped>

.layout-container {
	display: flex;
	height: 100vh;
	background: #f5f6fa;
}

.sidebar {
	background: #fff;
	border-right: 1px solid #e6e6e6;
	display: flex;
	flex-direction: column;
	min-width: 220px;
	box-shadow: 2px 0 8px 0 rgba(0,0,0,0.03);
}

.sidebar-header {
	display: flex;
	align-items: center;
	height: 64px;
	padding: 0 24px;
	font-size: 18px;
	font-weight: bold;
	border-bottom: 1px solid #f0f0f0;
}

.logo-icon {
	font-size: 28px;
	color: #409eff;
	margin-right: 10px;
}

.system-title {
	color: #409eff;
	font-weight: bold;
}

.menu-list {
	border-right: none;
	margin-top: 10px;
}

.main-container {
	flex: 1;
	display: flex;
	flex-direction: column;
	background: #f5f6fa;
}

.main-header {
	height: 64px;
	background: #fff;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 32px 0 24px;
	border-bottom: 1px solid #e6e6e6;
	box-shadow: 0 2px 8px 0 rgba(0,0,0,0.03);
}

.header-title {
	font-size: 20px;
	font-weight: bold;
	color: #222;
}

.header-right {
	display: flex;
	align-items: center;
	gap: 16px;
}

.user-info {
	display: flex;
	align-items: center;
	gap: 6px;
}

.main-content {
	padding: 24px 32px;
	background: #f5f6fa;
	min-height: calc(100vh - 64px);
}

.login-box {
	width: 350px;
	margin: 100px auto;
	border: 1px solid #DCDFE6;
	padding: 20px;
	border-radius: 5px;
	box-shadow: 0 0 30px #DCDFE6;
	text-align: center;
}

</style> 